<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">职称申报管理</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/">职称申报</a>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片的导航 -->
     <!-- :router="true" -->
    <div>
      <el-row>
        <el-col :span="24">
          <el-menu
           
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            
          >
            <el-menu-item index="1" @click="skipProcess(1)">基本信息</el-menu-item>
            <el-menu-item index="2" @click="skipProcess(2)">工作信息</el-menu-item>
            <el-menu-item index="3" @click="skipProcess(3)">学历信息</el-menu-item>
            <el-menu-item index="4" @click="skipProcess(4)">资历信息</el-menu-item>
            <el-menu-item index="5" @click="skipProcess(5)">社会团体任职</el-menu-item>
            <el-menu-item index="6" @click="skipProcess(6)">继续教育</el-menu-item>
            <el-menu-item index="7" @click="skipProcess(7)">职业/执业资格</el-menu-item>
            <el-menu-item index="8" @click="skipProcess(8)">业绩成果</el-menu-item>
            <el-menu-item index="9" @click="skipProcess(9)">著作论文</el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <!-- <div class="grid-content bg-purple"></div> -->
          <router-view></router-view>
        </el-col>
        <el-col :span="4">
          <div class="step_css">
            <h4>申报填写完成进度</h4>
            <el-steps direction="vertical" :active="setpIndex" space="90px">
              <el-step title="基本信息"></el-step>
              <el-step title="工作信息"></el-step>
              <el-step title="学历信息"></el-step>
              <el-step title="资历信息"></el-step>
              <el-step title="社会团体任职"></el-step>
              <el-step title="继续教育"></el-step>
              <el-step title="职业/执业资格"></el-step>
              <el-step title="业绩成果"></el-step>
              <el-step title="著作论文"></el-step>
            </el-steps>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>


export default {
  data() {
    return {
      activeIndex:'',
      dpIndex: 0,
      processeName:'',
      percent:20+'%',
      index:'',
      setpIndex:1,
      
    };
  },
  methods: {
    handleSelect(key, keyPath) {  
      // console.log(key, keyPath);
      // let len = key.split('')
      // this.index = Number([...len.slice(-1)][0]);
      this.setpIndex = Number(key);
      // sessionStorage.setItem('processeName2', this.index)
      // console.log(this.index);
    },
    skipProcess(n) {
      // this.processeNum = n;  
      n = String(n)
      // this.activeIndex = n;
      sessionStorage.setItem('activeIndex', n);
      // this.activeIndex = sessionStorage.getItem('activeIndex') || 1;
      this.$router.push('/personalinformation/declareprocess/process' + n);
      // console.log(this.$router.history.current.name);
    },
 
  },
  mounted(){
      this.activeIndex = sessionStorage.getItem('activeIndex') || 1;
    // console.log(this.$router);
    // this.processeName = sessionStorage.getItem('processeName') || 'Process1';
  },
};
</script>
<style scoped lang="less">
.el-menu-demo {
  text-align: center;
  border: none;
  li {
    transition: none;
    width: 11%;
    border-bottom: 1px solid #ccc !important;
  }
  li.is-active {
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-bottom: none !important;
  }
  .el-menu--horizontal&.el-menu-item.is-active {
    border-bottom: none !important;
  }

}
.step_css {
  padding-left: 40px;

  h4 {
    margin-bottom: 18px;
  }

   /deep/.el-step__title {
     font-size: 14px;
    
   }
}
.el-breadcrumb {
  margin-bottom: 20px;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}


.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

</style>